<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>学生信息</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/qcbycoursehelper/resours/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
 
 
<table class="layui-hide" id="test" lay-filter="test">

</table>
 
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
	<button class="layui-btn demo1" lay-event="Drop">五月<i class="layui-icon layui-icon-down layui-font-12"></i></button>
  </div>
</script>
              
          
<script src="/qcbycoursehelper/resours/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 --> 
 
<script>
layui.use(['dropdown', 'util', 'layer', 'table'], function(){
  var table = layui.table;
  var pageCount;
  var classID=1;
  var dropdown = layui.dropdown
  ,util = layui.util
  ,layer = layui.layer
  getPage();
  function getPage(){
	  $.ajax({
			type:"get",
			url:"http://localhost:8080/qcbycoursehelper/divideClassGetCount",
			data:{"classID":classID},
			dataType:'JSON',
			
			success:function(data){
				console.log(data);
				pageCount = data.count;
				classID =data.classID;
				table.reload('test', {
					where:{
						classID:classID
					}
					,url: 'http://localhost:8080/qcbycoursehelper/divideClass'
				});
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				alert(typeof(errorThrown));
			}
		});
  }
  
  table.render({
    elem: '#test'
    ,url:'http://localhost:8080/qcbycoursehelper/divideClass'
    ,where:{
    	"classID":classID
    }
    ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title: '提示'
      ,layEvent: 'LAYTABLE_TIPS'
      ,icon: 'layui-icon-tips'
    }]
    ,title: '用户数据表'
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
      ,{field:'name', title:'姓名', width:120, edit: 'text'}
      ,{field:'sex', title:'性别', width:200, edit: 'text'}
      ,{field:'school', title:'学校', width:200, edit: 'text'}
      ,{field:'class', title:'班级号', width:200, edit: 'text'}
      ,{field:'grade', title:'年级', width:200, edit: 'text', sort: true}
    ]]
    ,page: true
    ,limit:10
    ,response:{
		statusName: 'status' //规定数据状态的字段名称，默认：code
		,dataName: 'rows' //规定数据列表的字段名称，默认：data
	} 
		,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
			return {
		        "status": res[0].status,   //解析接口状态
		        "message":res[1].message,  //解析提示文本
		        "count": pageCount,       //解析数据长度
		        "rows": res[3].rows.item  //解析数据列表
		    };
  	}
  });
  
  table.on('toolbar(test)', function(obj){
	    
	    switch(obj.event){
	      case 'Drop':
	    	  dropdown.render({
	    	      elem: '.demo1'
	    	      ,data: [{
	    	        title: '五月'
	    	        ,classID: 1
	    	      },{
	    	        title: '六月'
	    	        ,classID: 2
	    	      },{
	    	        title: '九月'
	    	        ,classID: 3
	    	      },{
		    	    title: '七月'
			    	,classID: 6
			      }]
	    	      ,click: function(obj){
	    	    	  classID = obj.classID;
	    	    	  console.log(classID);
	    	    	  getPage();
	    	      }
	    	    });
	      break;
	    };
	  });
  }); 
  
  
</script>

</body>
</html>